<!-- 首页功能模块 -->
<template>
  <div class="index-tools-box">
    <ul>
      <!-- 设备 -->
      <li>
        <div
          class="tool"
          @click="toListPage('postGetUseDevList', '在用设备数', 'device-count')"
        >
          <div class="tool-icon"></div>
          <div class="tool-info">
            <span>在用设备数</span>
            <span>{{ toolsData.useDevNum || 0 }} 台</span>
          </div>
        </div>
      </li>
      <!-- 单位 -->
      <li>
        <div
          class="tool"
          @click="toListPage('postGetComInfoList', '使用单位数', 'unit-count')"
        >
          <div class="tool-icon"></div>
          <div class="tool-info">
            <span>使用单位数</span>
            <span>{{ toolsData.useComNum || 0 }}</span>
          </div>
        </div>
      </li>
      <!-- 施工告知受理数 -->
      <li>
        <div class="tool" @click="toListPage('postGetOperToldList', '施工告知受理数')">
          <div class="tool-icon"></div>
          <div class="tool-info">
            <span>施工告知受理数</span>
            <span>{{ toolsData.toldNum || 0 }}</span>
          </div>
        </div>
      </li>
      <!-- 使用登记受理数 -->
      <li>
        <div class="tool" @click="toListPage('postGetOperRegList', '使用登记受理数')">
          <div class="tool-icon"></div>
          <div class="tool-info">
            <span>使用登记受理数</span>
            <span>{{ toolsData.regNum || 0 }}</span>
          </div>
        </div>
      </li>
      <!-- 隐患条数 -->
      <li>
        <div class="tool" @click="toListPage('postGetHiddenList', '隐患条数')">
          <div class="tool-icon"></div>
          <div class="tool-info">
            <span>隐患条数</span>
            <span>{{ toolsData.hiddenNum || 0 }}</span>
          </div>
        </div>
      </li>
      <!-- 超期未检设备数 -->
      <li>
        <div class="tool" @click="toListPage('postGetOutDeviceList', '超期未检设备数')">
          <div class="tool-icon"></div>
          <div class="tool-info">
            <span>超期未检设备数</span>
            <span>{{ toolsData.outDeviceNum || 0 }}</span>
          </div>
        </div>
      </li>
      <!-- 2020监察总数 -->
      <li>
        <div class="tool" @click="toListPage('postGetMonitorTList', '2020监察总数')">
          <div class="tool-icon"></div>
          <div class="tool-info">
            <span>2020监察总数</span>
            <span>{{ toolsData.tasksNum || 0 }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  props: {
    toolsData: {},
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toListPage(dataType, title, routePath) {
      this.$store.commit("clearIndex");
      this.$store.commit("setListCategory", dataType);
      this.$store.commit("setListTitle", title);
      let path = routePath || "";
      let params = {
        dataType: dataType,
        routePath: path,
      };
      this.$router.push({
        name: "list-page",
        params: params,
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log('收到toolsData');
    // console.log(this.toolsData);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.handleKeyUp();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    // console.log('准备销毁键盘事件');
    document.onkeyup = null;
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.index-tools-box {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    li {
      flex: 1;
      height: 90%;
      margin: 0 0.15rem;
      color: @FontColor;
      border-radius: 0.1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.2s;
      box-sizing: border-box;
      // background-color: rgba(8, 49, 116,.6);
      // border: 2px solid #ccc;
      .tool {
        width: 100%;
        font-size: 0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .tool-icon {
          margin: 0 5%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 0.4rem;
          height: 0.4rem;
          background-image: url("../../assets/icon/设备.png");
          background-size: cover;
          transition: all 0.2s;
        }
        .tool-info {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          span {
            padding: 6% 0;
          }
        }
      }
    }
    li:hover {
      transform: translateY(-0.06rem);
    }
    li:hover > .tool > .tool-icon {
      width: 0.45rem;
      height: 0.45rem;
    }
    li:nth-child(1) {
      background-color: rgba(138, 25, 100, 1);
    }
    li:nth-child(2) {
      background-color: rgba(113, 87, 154, 1);
      .tool-icon {
        background-image: url("../../assets/icon/单位.png");
      }
    }
    li:nth-child(3) {
      background-color: rgba(93, 165, 92, 1);
      .tool-icon {
        background-image: url("../../assets/icon/公告.png");
      }
    }
    li:nth-child(4) {
      background-color: rgba(75, 124, 186, 1);
      .tool-icon {
        background-image: url("../../assets/icon/使用登记.png");
      }
    }
    li:nth-child(5) {
      background-color: rgba(96, 170, 170, 1);
      .tool-icon {
        background-image: url("../../assets/icon/隐患.png");
      }
    }
    li:nth-child(6) {
      background-color: rgba(229, 169, 69, 1);
      .tool-icon {
        background-image: url("../../assets/icon/超期未检.png");
      }
    }
    li:nth-child(7) {
      background-color: rgba(66, 142, 174, 1);
      .tool-icon {
        background-image: url("../../assets/icon/监察.png");
      }
    }
  }
}
</style>